<html>
<head>
    <title>Test Upload a File</title>
</head>
<body>
<form enctype="multipart/form-data" id="form-upload">
    {{/*1. file input*/}}
    <input type="file" name="file" id="file-input"/>
    {{/*2. Submit button*/}}
    <input type="submit" value="upload file" id="btn-submit">
</form>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        initFileUpload();

        function initFileUpload() {
            $("#btn-submit").click(function (e) {
                e.preventDefault();
                // construct the form data and apply new file name
                var file = $('#file-input').get(0).files[0];

                if (file === undefined) {
                    alert("file not found")
                    return
                }
                var fileName = file.name;
                var formData = new FormData();
                formData.append('file', file, fileName);

                $.ajax({
                    url: "http://localhost:9000/upload/" + fileName, // get the upload URL for the server
                    success: function (fileData) {
                        alert(fileData); // access the result of the file upload for the created file
                    },
                    error: function (e) {
                        alert('error ' + e.message);
                    },
                    // Form data
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false
                });
                return false;
            });
        }
    });
</script>